const path = require('path');

// 只要是webpack的插件，都一定要放到 plugin 节点中去配置
const htmlWebpackPlugin = require('html-webpack-plugin');
/* 该插件的两个作用：
    1、自动在内存中根据指定页面生成一个内存的页面。
    2、自动把打包好的 bundle.js 追加到页面中去
*/

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname, '/'),//引入 webpack-dev-server 工具后，该路径就作废了，没用了，因此，该出口配置项可以删除了，但是最后部署的时候需要它
        filename: 'bundle.js',
    },
    /* 
     当配置好这两个选项，入口 和 出口 文件后，在终端直接运行 webpack 命令，webpack 做了下面几步
        1、首先，webpack 发现，我们并没有通过命令的形式，给他指定入口和出口
        2、然后就会去项目的根目录中，查找 webpack 的配置文件 webpack.config.js
        3、找到配置文件后，会去解析它，解析完成，就得到配置文件中导出的配置对象
        4、当 webpack 拿到配置对象后，就拿到了配置对象中的入口和出口，然后进行打包构建
    */

    plugins: [ // 配置 webpack 插件的节点
        new htmlWebpackPlugin({  //创建一个在内存中，生成 HTML 页面的对象
            template: path.join(__dirname, './src/index.html'), //指定要内存化的页面，就像上面main.js的入口配置项一样的意思
            filename: 'index.html',//指定生成页面的名称，跟上面main.js的出口配置项一样的意思
        })
    ],

    module: { // 配置第三方 loader 的节点
        rules: [ // 查找规则 test-->要匹配的文件类型，use-->处理该类型文件对应的所用到的加载器
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//加载器的先后顺序不能乱写，在处理的时候会先到该文件中找配置规则，有则按从右到左的顺序，没有规则则不处理。从右到左的规则是从内往外处理，跟浏览器引擎处理样式方式一样
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // less 文件的处理配置项，它内部 还 有个依赖需要安装 : less
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // sass 文件的处理配置项，它内部 也 有个依赖需要安装 ：node-sass 的安装必须单独指定镜像地址 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass 
            { test: /\.jpg|png|jpeg|bmp|gif$/, use: ['url-loader?limit=92460&name=[hash:8]-[name].[ext]'] },
            /* loader 都可以传参，来控制一些参数信息，传参格式与 url 地址内的 get 方式传参格式相同，这里先介绍图片 loader 后面的参数：
                limit： 极限 控制多大字节以内的图片，可以被转换为 base64 编码格式，直接在页面中加载，一般也是小图片，至于多小的图片以后再查资料，这个 limit 的单位是字节 B
                name ： name=[name].[ext] 表示展示的文件名为[name]原名和[ext]原扩展名，一般不这么用，一般在前面加上 hash 值来避免文件名冲突  hash:n 为展示 n 位 hash 值，共 32 位
                        注意：图片文件大小没超过极限值，是不会把地址按name参数来编译的，会直接显示 base64 编码
            */
            { test:/\.ttf|eot|svg|woff|woff2$/, use: ['url-loader'] },//字体图标，处理所用的加载器也是 url-loader ，但是不要跟图片的处理合并书写，各自配置各自的
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            /* 在这里我在排除 node_module 文件夹的时候本以为用正则去严格匹配一下，结果在浏览器里报错下面信息
                bundle.js:11447 Uncaught TypeError: $export is not a function
                                at Object.<anonymous> (bundle.js:11447)
                                at __webpack_require__ (bundle.js:20)
                                at Object.<anonymous> (bundle.js:11432)
                                at __webpack_require__ (bundle.js:20)
                                at Object.<anonymous> (bundle.js:11423)
                                at __webpack_require__ (bundle.js:20)
                                at Object.<anonymous> (bundle.js:471)
                                at __webpack_require__ (bundle.js:20)
                                at Object.<anonymous> (bundle.js:11401)
                                at __webpack_require__ (bundle.js:20)
                虽然处理起来也麻烦，但是找出错误原因的时间并不长，然而，上一个错误原因整整折腾了我一整个晚上，才处理掉，就应 from 写为了 form，一定注意单词错误产生的bug，是最难排除的
            { test: /\.js$/, use: 'babel-loader', exclude: /^node_modules$/ },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules$/ }, */
            { test: /\.vue$/, use: ['vue-loader'] },
        ],
    },

    /* resolve: { // 配置导包路径的节点
        alias: {
            'vue$': 'vue/dist/vue.js',// 前面不加斜杠，自动去...
        }
    } */
}